<template style="margin: 0px">
  <div class="mian">
    <el-container>
      <el-aside width="auto">
        <main-vue :titles="isCollapse" :colors="colors"></main-vue>
      </el-aside>
      <!-- 文字大小 -->
      <el-config-provider :size="size">
        <el-container>
          <!-- 头部 -->
          <el-header>
            <div class="tops">
              <!-- 面包屑 -->
              <top-vue @top="isCollapse = $event" :size="size"></top-vue>

              <!-- 功能组件模块 -->
              <div class="function">
                <!-- 全屏组件 -->
                <span>
                  <full-vue :size="size"></full-vue>
                </span>

                <!-- 文字 -->
                <span class="tubiao2">
                  <text-vue @txt="txt" :sizes="size"></text-vue>
                </span>

                <!-- 颜色 -->
                <span>
                  <colour-vue></colour-vue>
                </span>

                <!-- 头像 -->
                <span class="tou">
                  <head-vue></head-vue>
                </span>
              </div>
            </div>

            <!-- 标签页 -->
            <tag-vue></tag-vue>
          </el-header>

          <!-- 主体 -->
          <el-main>
            <!-- <router-view v-slot="{ Component }">
              <keep-alive>
                <component :is="Component" :key="Component" v-if="$route.meta.keepAlive" />
              </keep-alive>
              <component :is="Component" :key="Component" v-if="!$route.meta.keepAlive" />
            </router-view>-->
            <router-view v-slot="{Component,route}">
              <keep-alive>
                <component :is="Component" :key="route.name" v-if="route.meta.keepAlive" />
              </keep-alive>

              <component :is="Component" v-if="!route.meta.keepAlive" />
            </router-view>
          </el-main>
        </el-container>
      </el-config-provider>
    </el-container>
  </div>
</template>

<script>
import MainVue from '@/components/MainVue.vue' // 引入左侧菜单组件
import TopVue from '@/components/TopVue.vue' // 引入面包屑组件
import TagVue from '@/components/TagVue.vue' // 引入标签页组件
import FullVue from '@/components/FullVue.vue' // 引入全屏组件
import TextVue from '@/components/TextVue.vue' // 引入文字组件
import ColourVue from '@/components/ColourVue.vue' // 引入颜色组件
import HeadVue from '@/components/HeadVue.vue' // 引入头像组件

export default {
  // 注册组件
  components: {
    MainVue,
    TopVue,
    TagVue,
    FullVue,
    TextVue,
    ColourVue,
    HeadVue
  },

  data() {
    return {
      isCollapse: false, // 菜单
      colors: '#6EB6F6', // 颜色
      size: ''
    }
  },
  created() {
    this.indexs
  },

  methods: {
    // 面包屑传值
    //   top(v) {
    //     this.isCollapse = v;
    //   },

    // 文字大小传值
    txt(v) {
      this.size = v
    }
  }
}
</script>

<style lang="less" scoped>
.mian {
  height: calc(100vh);
  .el-container {
    // 头部
    .el-header {
      width: 100%;
      height: 100px;
      margin-bottom: 7.5px;
      padding: 0px;

      // 功能组件
      .tops {
        display: flex;
        justify-content: space-between;

        .function {
          width: 20%;
          height: 60px !important;
          display: flex;
          align-items: center; //图片文字居中
          text-align: center;
          span {
            width: 80px;
            border-right: 2px solid #ccc;
            .wenzi {
              margin: auto;
            }
          }
          .tou {
            width: 80px;
            border-right: 2px solid white;
          }
        }
      }
    }
    // 主体
    .el-main {
      height: calc(100vh - 100px);
    }
  }
}
</style>
